import React, { FC } from "react"
import { Container, Grid, Box, Typography, Stack } from "@mui/material"
import Page from "../../components/Page"
import ArticleItem from "../../components/TArticleItem"
import { useTheme } from "@mui/material/styles"
import { useTranslation } from "react-i18next"
import {APP_BAR_MOBILE} from "../../layouts/DefaultLayout";

const getGreeting = () => {
  const time = new Date()
  const hour = time.getHours()

  if (hour > 6 && hour <= 11) {
    return {
      zh_CN: "早上好！",
      en: "Good Morning!",
    }
  } else if (hour > 11 && hour <= 13) {
    return {
      zh_CN: "中午好！",
      en: "Good Afternoon!",
    }
  } else if (hour > 13 && hour <= 19) {
    return {
      zh_CN: "下午好！",
      en: "Good Afternoon!",
    }
  } else if (hour > 19 && hour <= 23) {
    return {
      zh_CN: "晚上好！",
      en: "Good Evening!",
    }
  } else {
    return {
      zh_CN: "夜猫子！",
      en: "Night Owl!",
    }
  }
}

const Recommends: FC = () => {
  const theme = useTheme()
  const greeting = getGreeting()
  const { i18n } = useTranslation()

  return (
    <Page title="Dashboard">
      <Container maxWidth="lg" sx={{ paddingTop: `${APP_BAR_MOBILE + 20}px !important` }}>
        <Grid container direction="row" spacing={2} alignItems="flex-start">
          <Grid item xs={12} md={9}>
            <Stack sx={{ backgroundColor: "#fff", borderRadius: "16px" }}>
              {[1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map((item) => (
                <div key={item}>
                  <ArticleItem isLast={item === 15} />
                </div>
              ))}
            </Stack>
          </Grid>

          <Grid item md={3} sx={{ display: { xs: "none", md: "block" } }}>
            <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ backgroundColor: "#fff", padding: theme.spacing(2), borderRadius: "16px" }}>
              <Box>
                <Typography variant="subtitle2" noWrap>
                  {greeting[i18n.language]}
                </Typography>
                <Typography variant="body2" sx={{ color: "text.secondary", whiteSpace: "pre-wrap" }} noWrap>
                  Light up every day when you in blog!
                </Typography>
              </Box>

              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                fill="currentColor"
                className="bi bi-pencil-square"
                viewBox="0 0 16 16"
                style={{ cursor: "pointer", color: theme.palette.primary.main, marginLeft: "15px" }}
              >
                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
                <path
                  fillRule="evenodd"
                  d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
                />
              </svg>
            </Stack>
          </Grid>
        </Grid>
      </Container>
    </Page>
  )
}

export default Recommends
